<template>
    <div class="base-tree">
        <div class="head-container">
            <el-input v-model="searchValue" @input="changeValue" :placeholder="`请输入` + searchTitle" clearable prefix-icon="Search"
                style="margin-bottom: 20px" />
        </div>
        <div class="head-container">
            <el-tree :data="props.options" :props="props.props" :expand-on-click-node="props.expandOnClickNode"
                :filter-node-method="filterNode" ref="treeRef" :node-key="props.nodeKey" highlight-current
                default-expand-all @node-click="handleNodeClick" />
        </div>
    </div>
</template>
<script setup>

const props = defineProps({
    searchTitle: { type: String, default: '搜索条件' },
    props: {
        type: Object
    },
    options: {
        type: Array
    },
    nodeKey: {
        type: String,
        default: 'id'
    },
    expandOnClickNode: {
        type: Boolean,
        default: false
    }
})
const searchValue = ref('')
const emits = defineEmits(['handleNodeClick'])
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
const treeRef = ref(null)
const changeValue = (value) => {
    treeRef.value.filter(value)
}
defineExpose({
    treeRef:treeRef
})
const handleNodeClick = (data) => {
    emits('handleNodeClick', data)
}
</script>
<style lang="scss" scoped>
.base-tree {
	border: 1px solid #d8dce5;
    padding: 5px 5px 0 5px;
    margin-bottom: 5px;
    border-radius: 2px;
    height: 100%;
}
</style>